<template>
  <div>
    <div class="bidWai">
      <el-container>
        <el-main>
          <div class="gwrap6">
            <!-- 专辑 -->
            <!-- 歌单介绍 -->
            <div class="m-info">
              <div class="left">
                <img v-lazy="albumInfo.picUrl">
              </div>
              <div class="right">
                <div class="hd">
                  <i class="iconfont icon-biaoqian"></i>
                  <h2 class="tit">{{albumInfo.name}}</h2>
                </div>
                <p class="intr">歌手：
                  <a
                    href="javascript:;"
                    @click.prevent="goArtDetail(albumInfo.artist.id)"
                  >{{albumInfo.artist.name}}</a>
                </p>
                <p class="intr">发行时间：{{albumInfo.publishTime | dateFormat}}</p>
                <p class="intr">发行公司： {{albumInfo.company}}</p>
                <div class="btns">
                  <a
                    href="javascript:;"
                    class="bo"
                  ><i class="iconfont icon-bofang"></i>播放</a>
                  <a
                    href="javascript:;"
                    class="jia"
                  ><i class="iconfont icon-hao"></i></a>
                  <a
                    href="#"
                    @click.prevent="subAlbum(albumInfo.id)"
                  ><i class="iconfont icon-tianjiawenjianjia"></i>收藏</a>
                  <a href="javascript:;"><i class="iconfont icon-fenxiang"></i>（{{albumInfo.info.shareCount}}）</a>
                  <a href="javascript:;"><i class="iconfont icon-xiazai1"></i>下载</a>
                  <a href="javascript:;"><i class="iconfont icon-pinglun"></i>（{{albumInfo.info.commentCount}}）</a>
                </div>
              </div>
            </div>
            <!-- 介绍信息 -->
            <div class="n-albdesc">
              <h3>专辑介绍：</h3>
              <div
                class="f-brk"
                v-show="!isAllShow"
              >
                <p class="fst">{{albumInfo.description}}</p>
                <p>...</p>
              </div>
              <div
                class="f-allbrk"
                v-show="isAllShow"
              >
                <p class="fst">{{albumInfo.description}}</p>
              </div>
              <div class="f-cb">
                <a
                  href="javascript:;"
                  @click="showAll"
                  class="fcba"
                >展开 <i class="iconfont icon-down"></i> </a>
              </div>
            </div>
            <!-- END------------------------------ -->
            <!-- 歌单内容 -->
            <div class="n-songtb">
              <div class="utit">
                <span class="songlist">包含歌曲列表</span>
                <span class="songnum">{{albumSong.length}}首歌</span>
                <a href="#">
                  <i class="iconfont icon-yinfu"></i>
                  <span>生成外链播放器</span>
                </a>
              </div>
              <div class="songlis">
                <table class="mtable">
                  <thead>
                    <tr>
                      <th class="first"></th>
                      <th class="biao">歌曲标题</th>
                      <th class="time">时长</th>
                      <th class="artister">歌手</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item,index) in albumSong"
                      :key="index"
                    >
                      <td class="one">
                        <div class="hd">
                          <span class="num">{{index+1}}</span>
                          <i
                            class="iconfont icon-bofang"
                            @click="playMusic(item.id)"
                          ></i>
                        </div>
                      </td>
                      <td class="music">
                        <a
                          href="#"
                          @click.prevent="goSong(item.id)"
                        >{{item.name}}</a>
                      </td>
                      <td class="timelong">
                        <span>{{item.dt | dateFormat2}}</span>
                        <div class="td iconfa">
                          <div class="boxaaa icons">
                            <a
                              href="#"
                              class="icn"
                            ><i class="iconfont icon-hao"></i></a>
                            <a
                              href="#"
                              class="icn"
                            ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                            <a
                              href="#"
                              class="icn"
                            ><i class="iconfont icon-fenxiang"></i></a>
                            <a
                              href="#"
                              class="icn"
                            ><i class="iconfont icon-xiazai1"></i></a>
                          </div>

                        </div>
                      </td>
                      <td class="artister">{{item.ar[0].name}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- END------------------------------ -->

            <!-- 评论 -->
            <div class="commo">
              <div class="comtit">
                <h3>评论</h3>
                <span>共{{comcount}}条评论</span>
              </div>
              <div class="commain">
                <!-- 输入评论 -->
                <div class="iptarea">
                  <div class="head">
                    <img src="../../../assets/image/default_avatar.jpg">
                  </div>
                  <div class="hflag">
                    <div class="shuqu">
                      <textarea
                        name=""
                        id=""
                        cols="85"
                        rows="10"
                        placeholder="评论"
                      ></textarea>
                    </div>
                    <div class="combtns">
                      <i class="iconfont icon-xiaolian"></i>
                      <i class="iconfont icon-aite"></i>
                      <a href="#">评论</a>
                    </div>
                    <div class="corr"></div>
                  </div>
                </div>
                <!-- 评论区 -->
                <div class="cmmts">
                  <h3 v-show="jingc">精彩评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index2) in cominfoshot"
                    :key="index2"
                    v-show="jingc"
                  >
                    <div
                      class="head"
                      @click="goUserdetail(item.user.userId)"
                    >
                      <img v-lazy="item.user.avatarUrl">
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a
                          href="#"
                          @click.prevent="goUserdetail(item.user.userId)"
                        >{{item.user.nickname}}</a>
                        <img src="../../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a href="#"><i
                            class="iconfont zanicon"
                            @click.prevent="dianzan(item.commentId,index2)"
                          ></i>
                          ({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>
                  </div>
                  <h3>最新评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index3) in cominfos"
                    :key="'3'+index3"
                  >
                    <div
                      class="head"
                      @click="goUserdetail(item.user.userId)"
                    >
                      <img v-lazy="item.user.avatarUrl">
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a
                          href="#"
                          @click.prevent="goUserdetail(item.user.userId)"
                        >{{item.user.nickname}}</a>
                        <img src="../../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a
                          href="#"
                          @click.prevent="dianzan(item.commentId)"
                        ><i class="iconfont"></i>({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 页数 -->
                <div class="j-flag"></div>
              </div>
            </div>
          </div>
        </el-main>
        <el-aside width="270px">
          <!-- <p class="famil">喜欢这张专辑的人</p>
          <ul class="likeper">
            <li
              v-for="(item,index) in simlist"
              :key="index"
            >
              <img v-lazy="item.avatarUrl">
            </li>
          </ul> -->
          <p class="famil">Ta的其他热门专辑</p>
          <ul
            class="hotots"
            v-show="noData"
          >
            <li
              v-for="(item,index4) in hotlist"
              :key="index4"
            >
              <div class="left">
                <img :src="item.picUrl">
              </div>
              <div class="right">
                <p class="fir"><a href="#">{{item.name}}</a></p>
                <p class="sec"><a href="#">{{item.artist.name}}</a></p>
              </div>
            </li>
          </ul>
          <p v-show="!noData">暂时获取不到！！</p>
          <div class="moreInsl">
            <p class="duoduan">网易云音乐多端下载</p>
            <ul>
              <li class="fir">
                <a href="#">
                  <i class="iconfont icon-anzhuoshouji"></i>
                </a>
              </li>
              <li class="sec">
                <a href="#">
                  <i class="iconfont icon-windows"></i>
                </a>
              </li>
              <li class="thr">
                <a href="#">
                  <i class="iconfont icon-pingguoshouji"></i>
                </a>
              </li>
            </ul>
            <p class="last">同步歌单，随时畅听320k好音乐</p>
          </div>
        </el-aside>
      </el-container>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="1200"
        :current-page="nowpage"
        prev-text="< 上一页"
        next-text="下一页 >"
        @current-change="changepage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../../eventbus.js'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      albumID: 0,
      albumInfo: {
        name: '',
        info: {
          shareCount: 0
        },
        artist: {
          name: ''
        }
      },
      albumSong: {
        name: '',
        ar: [
          { name: '' }
        ]
      },
      // 喜欢专辑的用户
      likePer: [],
      // 他的热门专辑
      hotalb: [],
      isAllShow: false,
      // 评论数据
      comData: [],
      cominfoshot: [],
      cominfos: [],
      comcount: 0,
      newcomnum: 0,
      hotcomnum: 0,
      hotlist: [],
      noData: false,
      nowpage: 1,
      jingc: true
    }
  },
  created () {
    this.getAlbumInfo()
    this.getComm()
    this.getCommOther()
  },
  methods: {
    ...mapMutations(['goSong']),
    async getAlbumInfo () {
      this.albumID = this.$route.query.id;
      // console.log('专辑ID：', this.albumID)
      let res = await axios.get('https://autumnfish.cn//album?id=' + this.albumID)
      // console.log(res)
      this.albumInfo = res.data.album
      this.albumSong = res.data.songs
    },
    showAll () {
      // 文字全部显示
      this.isAllShow = !this.isAllShow;
      // 文字变为收起
      if (this.isAllShow) {
        document.getElementsByClassName('fcba')[0].innerText = '收起'
      }
      else {
        document.getElementsByClassName('fcba')[0].innerText = '展开'
      }
    },
    // 获取评论
    async getComm () {
      let ofset = (this.nowpage - 1) * 20
      let res = await axios.get('https://autumnfish.cn//comment/album?id=' + this.albumID + '&limit=20&offset=' + ofset)
      // console.log(res)
      this.comcount = res.data.total
      this.cominfoshot = res.data.hotComments
      this.cominfos = res.data.comments
      console.log(res)
      this.newcomnum = res.data.comments.length
      this.hotcomnum = res.data.hotComments.length
    },
    // 获取他的其他热门专辑（这个接口有点问题只能获得部分的，大多数获取不到。）
    async getCommOther () {
      let res = await axios.get('https://autumnfish.cn//artist/album?id=' + this.albumID);
      // console.log(res)
      if (res.data.code === 200) {
        this.hotlist = res.data.hotAlbums
      }
      else if (res.data.code === 404) {
        this.noData = true;
      }
    },
    // 改变页数
    changepage (val) {
      if (val !== 1) {
        // 隐藏精彩评论
        this.jingc = false
      }
      else {
        // 显示精彩评论
        this.jingc = true
      }
      this.nowpage = val;
      this.getComm()
    },
    // 点赞评论
    async dianzan (id, index) {
      // 图标变红
      if (document.getElementsByClassName('zanicon')[index].style.backgroundPosition === -150 + "px " + 0 + "px") {
        document.getElementsByClassName('zanicon')[index].style.backgroundPosition = -170 + "px " + 0 + "px";
        // 同步数据
        let res = await axios.get('https://autumnfish.cn//comment/like?id=' + this.albumID + '&cid=' + id + '&t=1&type=3')
        console.log(res)
      } else {
        document.getElementsByClassName('zanicon')[index].style.backgroundPosition = -150 + "px " + 0 + "px";
        let res = await axios.get('https://autumnfish.cn//comment/like?id=' + this.albumID + '&cid=' + id + '&t=0&type=3')
        console.log(res)
      }

    },
    goArtDetail (id) {
      // console.log(id)
      this.$router.push({ path: '/artist', query: { id: id } })
    },
    // 点击播放icon，播放音乐
    playMusic (id) {
      bus.$emit('musicid', id)
    },
    // 收藏专辑
    subAlbum (id) {
      // console.log('专辑id：', id)
      console.log('/album/sub?t=1 /album/sub?t=0———————接口参数错误，待解决')
    },
    // 点击评论用户的头像或昵称，进入用户页
    goUserdetail (id) {
      this.$router.push({ path: '/user', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.bidWai {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .el-main {
    border-right: 1px solid #d3d3d3;
    .gwrap6 {
      padding: 47px 30px 40px 39px !important;
      // 专辑
      // 歌单介绍
      .m-info {
        position: relative;
        .left {
          width: 177px;
          height: 177px;
          position: absolute;
          left: 0;
          top: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          margin-left: 220px;
          .hd {
            display: flex;
            justify-content: left;
            align-items: center;
            margin: 0 0 12px;
            line-height: 24px;
            .iconfont {
              color: #da1e1e;
              font-size: 20px;
            }
            .tit {
              margin: 0;
              font-weight: normal;
              font-size: 20px;
              margin-left: 10px;
            }
          }
          .intr {
            font-size: 12px;
            margin-top: 4px;
            line-height: 18px;
            color: #666;
            a {
              font-size: 12px;
              color: #0c73c2;
              text-decoration: none;
            }
            a:hover {
              text-decoration: underline;
            }
          }
          .btns {
            margin: 20px -10px 25px 0;
            a {
              text-decoration: none;
              color: #333;
              display: inline-block;
              margin-right: 6px;
              padding: 0 5px;
              height: 31px;
              line-height: 30px;
              min-width: 23px;
              border: 1px solid #f2f2f2;
              background-color: #f2f2f2;
              border-radius: 5px;
              font-size: 12px;
              text-align: center;
              .iconfont {
                font-size: 13px;
                margin-right: 5px;
              }
            }
            .bo {
              color: #fff;
              background-color: #4190d9;
              margin: 0;
              border: none;
              border-radius: 5px 0 0 5px;
              border-right: 1px solid #666;
            }
            .jia {
              color: #fff;
              background-color: #4190d9;
              border-radius: 0 5px 5px 0;
              border: none;
            }
          }
        }
      }
      // 简介
      .n-albdesc {
        margin-top: 40px;
        h3 {
          padding: 0;
          margin: 0;
          font-size: 12px;
        }
        // 显示三行
        .f-brk {
          word-wrap: break-word;
          word-break: break-word;
          white-space: normal;
          font-size: 12px;
          .fst {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
          p {
            color: #666;
            text-indent: 2em;
            line-height: 24px;
            margin-top: 4px;
          }
        }
        // 全部显示
        .f-allbrk {
          word-wrap: break-word;
          word-break: break-word;
          white-space: normal;
          font-size: 12px;
          p {
            color: #666;
            text-indent: 2em;
            line-height: 24px;
            margin-top: 4px;
          }
        }
        .f-cb {
          a {
            float: right;
            cursor: pointer;
            font-size: 12px;
            color: #0c73c2;
            text-decoration: none;
            .iconfont {
              font-size: 12px;
            }
          }
        }
      }
      // 歌单内容
      .n-songtb {
        margin-top: 27px;
        .utit {
          height: 33px;
          border-bottom: 2px solid #c20c0c;
          .songlist {
            font-size: 20px;
            float: left;
          }
          .songnum {
            font-size: 12px;
            color: #666;
            margin: 9px 0 0 20px;
            float: left;
          }
          a {
            color: #4996d1;
            font-size: 12px;
            float: right;
            margin-right: 20px;
            margin-top: 5px;
          }
        }
        .songlis {
          .mtable {
            width: 100%;
            border: 1px solid #d9d9d9;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            thead {
              tr {
                th {
                  height: 38px;
                  background-color: #f7f7f7;
                  background-position: 0 0;
                  background-repeat: repeat-x;
                  vertical-align: top;
                  text-align: left;
                  font-weight: normal;
                  margin: 0;
                  padding: 0;
                  font-size: 12px;
                  color: #666;
                  border-right: 1px solid #666;
                  line-height: 38px;
                  padding: 0px 10px;
                }
                .first {
                  width: 59px;
                }
                .biao {
                  width: 210px;
                }
                .time {
                  width: 90px;
                }
                .artister {
                  width: 70px;
                }
              }
            }
            tbody {
              tr {
                td {
                  padding: 6px 10px;
                  line-height: 18px;
                  text-align: left;
                  font-size: 12px;
                  color: #999;
                }
                .one {
                  .hd {
                    height: 18px;
                    .num {
                      float: left;
                      width: 25px;
                      margin-left: 0;
                      text-align: center;
                    }
                    .iconfont {
                      font-size: 20px;
                      margin-left: 13px;
                      color: #b0b0b0;
                    }
                    .iconfont:hover {
                      color: #666666;
                    }
                  }
                }
                .music {
                  padding: 10px;
                  display: flex;
                  justify-content: left;
                  align-items: center;
                  color: #333;
                  a {
                    text-decoration: none;
                    color: #333;
                    font-size: 12px;
                  }
                  a:hover {
                    text-decoration: underline;
                  }
                }
                .timelong {
                  color: #333;
                  .icn {
                    margin-right: 5px;
                    margin-bottom: 3px;
                    color: #666;
                    text-decoration: none;
                    .iconfont {
                      font-size: 15px;
                    }
                  }
                  .icons {
                    display: none;
                  }
                }
                .artister {
                  color: #333;
                  width: 100%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
              tr:hover {
                .timelong .icons {
                  display: block;
                }
                .timelong span {
                  display: none;
                }
              }
              tr:nth-child(even) {
                background: #f7f7f7;
              }
            }
          }
        }
      }
      // 评论
      .commo {
        margin-top: 40px;
        .comtit {
          height: 33px;
          border-bottom: 2px solid #c20c0c;
          display: flex;
          justify-content: left;
          align-items: center;
          h3 {
            font-size: 20px;
            font-weight: normal;
          }
          span {
            margin-left: 20px;
            color: #666;
            font-size: 12px;
          }
        }
        .commain {
          // 评论输入框
          .iptarea {
            margin-bottom: 20px;
            display: flex;
            justify-content: left;
            align-items: center;
            margin-top: 20px;
            .head {
              width: 50px;
              height: 50px;
              margin-right: 20px;
              margin-bottom: 35px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .hflag {
              .shuqu {
                padding-right: 14px;
                textarea {
                  height: 50px;
                  display: block;
                  padding: 5px 6px 6px;
                  border: 1px solid #cdcdcd;
                  border-radius: 2px;
                  line-height: 19px;
                  box-sizing: content-box;
                  resize: none;
                  overflow: auto;
                  font-size: 12px;
                  color: #333;
                }
              }
              .combtns {
                padding: 0 10px;
                padding-top: 10px;
                .iconfont {
                  float: left;
                  margin: 0px 10px 0 0;
                  cursor: pointer;
                }
                a {
                  text-decoration: none;
                  float: right;
                  font-size: 12px;
                  display: inline-block;
                  width: 46px;
                  height: 25px;
                  color: #fff;
                  background-color: #4391da;
                  text-align: center;
                  line-height: 25px;
                }
              }
            }
          }
          // 评论区
          .cmmts {
            h3 {
              height: 20px;
              border-bottom: 1px solid #cfcfcf;
              font-weight: normal;
              font-size: 14px;
            }
            .acom {
              padding: 15px 0;
              border-top: 1px solid #ccc;
              display: flex;
              justify-content: left;
              // align-items: center;
              .head {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .cntwrap {
                width: 100%;
                .usersay {
                  width: 100%;
                  overflow: hidden;
                  line-height: 20px;
                  font-size: 12px;
                  color: #333;
                  a {
                    text-decoration: none;
                    font-size: 12px;
                    margin-right: 5px;
                    color: #0c73c2;
                  }
                  a:hover {
                    text-decoration: underline;
                  }
                  img {
                    height: 12px;
                    margin-right: 5px;
                  }
                }
                .myact {
                  margin-top: 15px;
                  text-align: right;
                  .time {
                    font-size: 12px;
                    float: left;
                    margin: 0 !important;
                    color: #999;
                  }
                  a {
                    font-size: 12px;
                    text-decoration: none;
                    color: #999;
                  }
                  span {
                    margin: 0 8px;
                    color: #ccc;
                  }
                  .iconfont {
                    display: inline-block;
                    margin-right: 5px;
                    vertical-align: -2px;
                    width: 15px;
                    height: 14px;
                    background-image: url(../../../assets/image/icon2.png);
                    background-position: -150px 0;
                  }
                }
              }
            }
          }
          // 页数
          .j-flag {
          }
        }
      }
    }
  }
  .el-aside {
    padding: 20px 40px 40px 30px;
    .famil {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 12px;
      font-weight: 700;
    }
    .hotots {
      margin-bottom: 25px;
      font-size: 12px;
      color: #333;
      margin: 0;
      padding: 0;
      li {
        width: 200px;
        height: 50px;
        margin-bottom: 15px;
        line-height: 24px;
        display: flex;
        justify-content: left;
        align-items: center;
        .left {
          width: 50px;
          height: 50px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          margin-left: 10px;
          p {
            width: 140px;
            a {
              text-decoration: none;
            }
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .fir {
            a {
              font-size: 14px;
              color: #000;
            }
          }
          .sec {
            color: #999;
            font-size: 12px;
            a {
              color: #333;
              font-size: 12px;
              margin: 0 2px 0 4px;
            }
          }
        }
      }
    }
    .likeper {
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      width: 213px;
      li {
        list-style: none;
        padding: 0 0 13px 13px;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
    .moreInsl {
      margin: 20px 0;
      padding-bottom: 20px;
      .duoduan {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        color: #333;
        font-size: 12px;
        font-weight: 600;
      }
      ul {
        margin: 0;
        padding: 0;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          list-style: none;
          a {
            text-decoration: none;
            .iconfont {
              font-size: 45px;
              color: #c2c2c2;
            }
          }
        }
        .fir {
          a {
            width: 42px;
            height: 48px;
          }
        }
        .sec {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;
        }
        .thr {
          width: 42px;
          height: 48px;
        }
      }
      .last {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
